<template>
  <a-row justify="center">
    <a-col :flex="4">
      <div style="padding-right:20px">
        <a-form name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
          <a-form-item label="Content" name="content">
            <a-textarea v-model:value="content" placeholder="" :rows="6" />
          </a-form-item>
          <a-form-item name="errorLevel" label="Error level">
            <a-segmented v-model:value="level" :options="segmentedData" />
          </a-form-item>
          <a-form-item name="size" label="Size">
            <a-button-group>
              <a-button @click="decline">
                <template #icon>
                  <MinusOutlined />
                </template>
                samll
              </a-button>
              <a-button @click="increase">
                <template #icon>
                  <PlusOutlined />
                </template>
                large
              </a-button>
            </a-button-group>
          </a-form-item>
        </a-form>
      </div>
    </a-col>
    <a-col :flex="1">
      <div style="padding-left: 20px;">
        <a-qrcode :value="content" 
        :error-level="level"
        type="canvas"
        :size="size" />
      </div>
    </a-col>
  </a-row>
  <a-row>
  <a-typography>
    <a-typography-title :level="4">关于二维码纠错等级</a-typography-title>
    <a-typography-paragraph> 
      纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
    </a-typography-paragraph>
    <a-typography-paragraph>
      通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
    </a-typography-paragraph>
  </a-typography>
  </a-row>
</template>

<script setup lang='ts'>
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { reactive, toRefs, ref } from 'vue'
interface FormState {
  content: string;
}

const formState = reactive<FormState>({
  content: 'Hello World!',
});

const content = ref("蛋贩子")

const segmentedData = ['L', 'M', 'Q', 'H'];
const level = ref(segmentedData[1]);

const size = ref(160);
const decline = () => {
  size.value = size.value - 10;
  if (size.value < 48) {
    size.value = 48;
  }
};
const increase = () => {
  size.value = size.value + 10;
  if (size.value > 400) {
    size.value = 400;
  }
};
</script>

<style scoped></style>